import React, { useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { useParams } from 'react-router-dom';
import TopicStore from '@/store/topic';

const topicStore = new TopicStore();

// update or insert
const TopicUpsertPage = observer(() => {
    const { id } = useParams();

    useEffect(() => {
        if (id) {
            topicStore.getTopic(id, {
                mdrender: false,
            });
        }
    }, [id]);

    return (
        <main>
            <form
                onSubmit={(e) => {
                    e.preventDefault();
                    if (id) {
                        topicStore.postTopicsUpdate();
                    } else {
                        topicStore.postTopics();
                    }
                }}
            >
                <div>
                    <span>选择模块</span>
                    <select value={topicStore.topic?.tab} onChange={(e) => topicStore.setTab(e.target.value)}>
                        <option value='share'>分享</option>
                        <option value='ask'>问答</option>
                        <option value='job'>招聘</option>
                        <option value='dev'>客户端测试</option>
                    </select>
                </div>
                <div>
                    <input
                        placeholder='标题字数10字以上'
                        value={topicStore.topic?.title}
                        onChange={(e) => topicStore.setTitle(e.target.value)}
                    />
                </div>
                <div>
                    <textarea
                        placeholder='文章内容'
                        onChange={(e) => topicStore.setContent(e.target.value)}
                        value={topicStore.topic?.content}
                    />
                </div>
                <button type='submit'>保存</button>
            </form>
        </main>
    );
});

export default TopicUpsertPage;
